/**
/* STS login form
/*
/* @author: Alfin Akhret <alfin.akhret@gmail.com>
/*
*/

/* basic styling */
body{
  background: #fafafa url("../smooth/resources/img/body_bg.png") repeat;
  /*background: #fafafa;*/
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #686868;
  margin:0;
  padding:0;
}

#wrapper{
  width: 970px;
  margin: 0 auto;
}

/* header */
header{
  border-bottom: 1px solid #c5c5c5;
  overflow: hidden;
  margin-top: 0;
  padding-top: 10px;
}

header div {
  position: relative;
  width: 50px;
  background: url("../smooth/resources/img/help.png") no-repeat center top;
  height: 48px;
  float: right;
  margin-top: 35px;
}
header div p {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  color: #a1a1a1;
  text-shadow: 1px 1px #fff;
  font-size: 12px;
}

header div p a{
  text-decoration: none;
  color: #a1a1a1;
}

header hgroup{
  float: left;
}

/** main section **/
section {
  clear: both;
  border-top: 1px solid #fff;
  padding-top: 20px;
  background: url("../smooth/resources/img/the_icon.png") no-repeat;
  overflow: hidden;
  min-height: 420px;
}

section p {
  margin-bottom: 32px;
  color: #000;
}

/** form **/
form{
  width: 315px;
}

form .text_input {
  border: 1px solid #bbb;
  border-radius: 3px;
  font-size: 16px;
  padding: 5px 10px;
  box-shadow: 2px 2px 3px #e3e3e3 inset;
  display: block;
  margin-bottom: 15px;
  color: #999999;
}

form img{
  border-radius: 3px;
  margin-bottom: 10px;
}

form input:nth-child(2){
  margin-bottom: 0;
}

form div {
  background: rgba(255,255,255,0.6);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 295px;
  margin-bottom: 15px;
  box-shadow: 3px 3px 5px #e3e3e3;
}

#login_btn {
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0);
  background-image: -moz-linear-gradient(top, #fe8c11 54%, #fe5911);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.54, #fe8c11), color-stop(1.0, #fe5911));
  padding: 3px 10px 5px;
  width: 100px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  box-shadow: 2px 2px 0px #cecece,
              0px 1px 0px #ffcd9d inset;
  margin: 5px 105px;
  font-size: 18px;
  text-shadow: 1px 1px 1px #c4450a;
}

footer{
  background: none repeat scroll 0 0 #C60A1F;
  text-align: center;
  color: rgba(250,250,250, 0.5);
  margin: 25px 0 0 0;
  width: 100%;
  padding: 5px 0 10px;
  box-shadow: 0px 5px 5px #ae091b inset;
  font-size: 12px;
}

/** warning dialog **/
#warning{
  color: rgba(255,0,0,1);
  font-size: 12px;
  margin: 0 5px 5px;
}

#warning li{
  list-style: none;
}


/** THE EFFECTS **/
/******************/
#login_btn{
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

#login_btn.klik{
  text-shadow:1px 1px 2px #953000;
  color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ed4d00 54%, #ed4d00);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.54, #ed4d00), color-stop(1.0, #ed4d00));
  -webkit-box-shadow: inset 0 0 5px #953000;
  -moz-box-shadow: inset 0 0 5px #953000;
  -o-box-shadow: inset 0 0 5px #953000;
  box-shadow: inset 0 0 5px #953000;
  margin: 6px 105px;
}

form .text_input:focus{
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

form .text_input:focus{
  border: 1px solid #fe8c11;
  /*background: #f7f7f7;*/
}
